/* --- GLOBAL SETTINGS --- */
:root {
    --brand-green: #33671e;
    --brand-orange: #be4a20;
    --white: #ffffff;
    --site-bg: #F8F1FF; /* This is your new background color */
    --font-main: 'Verdana', Arial, sans-serif;
}

/* --- RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--site-bg); /* This colors everything outside the cards */
    margin: 0;
    padding: 0;
}

/* This targets paragraphs specifically inside your content box */
.main-card p {
    margin-bottom: 2em !important; /* The !important is a "last resort" to force the rule */
    display: block;
}

/* --- HEADER --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--white);
    border-bottom: 5px solid var(--brand-orange);
    position: relative;
    z-index: 1000;
	min-height:173px;
	background-image:url(images/wooden-floor-background-scaled.jpg);
	background-position:50% 50%;
}

.logo-img {
    height: 75px;
    width: auto;
}

/* --- BUTTON MENU NAVIGATION --- */
.nav-links {
    display: flex;
    list-style: none;
    gap: 0px; /* Space between the buttons */
}

.nav-links li {
    position: relative;
}

/* The Button Style */
.nav-links a, 
.dropdown-content a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--brand-green); /* Button Background */
    color: var(--white);                  /* Button Text */
    font-weight: 600;
    font-size: 13px;
    border-radius: 0px;                   /* Rounded corners */
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    border: none;
}

/* Button Hover State */
.nav-links a:hover,
.dropdown-content a:hover {
    background-color: var(--brand-orange);
    color: var(--white);
}

/* --- DROPDOWN SPECIFICS --- */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0px; /* Gap so it doesn't flicker when moving mouse down */
    z-index: 100;
}

/* Stack the buttons inside the dropdown */
.dropdown-content a {
    display: block;
    margin-bottom: 0px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.nav-links li:hover .dropdown-content {
    display: block;
}


/* --- HERO SECTION --- */
.hero {
    height: 75vh;
    /* This looks for a variable called --hero-img. If not found, it uses the fallback msc_tree.jpg */
    background: var(--hero-img, url('msc_tree.jpg'));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- This corrects the main hero image to make it mobile responsive. --- */
.hero-image {
    width: 100%;
    height: 60vh; /* Takes up 60% of the screen height on mobile */
    background-size: cover; /* Forces the image to fit without stretching */
    background-position: center; /* Keeps the heart of the image visible */
}

@media (max-width: 768px) {
    .hero-image {
        height: 40vh; /* Makes it slightly shorter on phones */
    }
}

/* --- MAIN CONTENT LAYOUT --- */

/* The Container: This limits the width and centers everything */
.content-container {
    max-width: 1100px; /* Adjust this to make the "box" wider or narrower */
    margin: 0 auto;    /* Centers the container horizontally */
    padding: 0 20px;   /* Prevents text from hitting edges on mobile */
    position: relative;
    z-index: 10;       /* Ensures it sits on top of the hero image */
}

/* The Boxed Card */
.main-card {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* Soft shadow for depth */
    
    /* The Overlay Effect */
    margin-top: -72px; /* Pulls the box up into the hero image */
    
   /* bottomr border accent, but removing. border-bottom: 3px solid var(--brand-green); */
}

/* Grid inside the card for organization */
.content-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.content-block {
    flex: 1;
}

.main-card h2 {
    color: var(--brand-green);
    margin-bottom: 20px;
    font-size: 2rem;
}

/* Responsive Tweak for Mobile */
@media (max-width: 768px) {
    .main-card {
        margin-top: -50px; /* Less overlap on small screens */
        padding: 20px;
    }
    
    .content-grid {
        flex-direction: column; /* Stacks columns on mobile */
    }
}

/* --- SECTION HEADING --- */

.section-title-container {
    max-width: 1100px;
    margin: 60px auto 30px auto; /* 60px space above, 30px space below */
    text-align: center;
    padding: 0 20px;
}

.scroll-heading {
    color: var(--brand-green);
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    
    /* Animation - fades in as you scroll */
    view-timeline-name: --revealing-header;
    view-timeline-axis: block;
    animation: fadeInHeader both;
    animation-timeline: --revealing-header;
    animation-range: entry 10% cover 30%;
}

@keyframes fadeInHeader {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Add a small orange underline to match your branding */
.scroll-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--brand-orange);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- EMBEDDED HIGHLIGHT BOX --- */

.highlight-box {
    background-color: #cfee9e; /* Your requested highlight color */
    border-left: 5px solid var(--brand-green); /* Adds an accent "callout" bar */
    padding: 25px 30px;
    margin: 30px 0; /* Space above and below the box */
    border-radius: 0 12px 12px 0; /* Rounded on the right side */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02); /* Very subtle depth */
}

.highlight-box p {
    margin-bottom: 0; /* Override your double-spacing here to keep the box tight */
    color: #2d4d1a;   /* Darker green for high contrast on the light background */
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
}

.highlight-box strong {
    color: var(--brand-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
}

/* --- ANIMATED SCROLL BOXES --- */

.animated-grid-container {
    max-width: 1100px;
    margin: 0 auto 50px auto; /* Centered, with space below */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 30px;
    padding: 0 20px;
}

.scroll-box {
    background-color: #cfee9e; /* Your requested standout color */
    padding: 30px;
    border-radius: 15px;      /* Rounded corners */
    border: none;             /* Explicitly no borders */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Soft drop shadow */
    color: #33671e;           /* Dark green text for readability */
    
    /* Animation Setup */
    view-timeline-name: --revealing-item;
    view-timeline-axis: block;
    animation-linear: both;
    animation-timeline: --revealing-item;
    animation-range: entry 10% cover 30%; /* Triggers as it enters the view */
}

/* Specific Animations for Left and Right */
.scroll-box.left {
    animation-name: slideInLeft;
}

.scroll-box.right {
    animation-name: slideInRight;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Responsiveness: Stack them vertically on small screens */
@media (max-width: 768px) {
    .animated-grid-container {
        grid-template-columns: 1fr;
    }
}

/* RECOMMENDED READING LIST GRID CODE */
.reading-list-container {
    padding: 20px;
}

/* The Grid Layout */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

/* Individual Category Cards */
.book-category-card {
    display: block; /* Ensure they are visible by default */
    background: white;
    border-left: 5px solid var(--brand-orange);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.book-category-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.book-category-card h3 {
    color: var(--brand-green);
    margin-top: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.book-category-card ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.book-category-card li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.book-category-card li em {
    color: var(--brand-orange);
    font-style: italic;
}

/* Filter Container */
.library-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 40px auto 50px auto; /* 50px gap between buttons and cards */
    max-width: 1000px;
}

/* Filter Buttons */
.filter-btn {
    background-color: #f0f0f0; /* Light gray base */
    border: 2px solid var(--brand-green); /* Border in your Brand Green */
    color: var(--brand-green) !important; /* Force text to show in Green */
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    display: inline-block; /* Ensures it renders as a box */
}

/* Button Hover State */
.filter-btn:hover {
    background-color: var(--brand-green);
    color: white !important;
}

/* Active State (When Selected) */
.filter-btn.active {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Hidden Class for Filter */
/* --- FIXED FILTER LOGIC --- */
/* Remove the old .hidden and .is-hidden blocks and use this: */
.book-category-card.js-hide {
    display: none !important;
}

/* Ensure the grid stays visible even when items are filtered */
.book-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
}

/* Mobile Tweak */
@media (max-width: 600px) {
    .book-grid {
        grid-template-columns: 1fr; /* Force single column on mobile */
    }
}

/* --- MAILCHIMP NEWSLETTER FORM --- */

.newsletter-section {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.newsletter-container {
    background-color: var(--white);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 5px solid var(--brand-green);
}

.newsletter-form {
    display: flex;
    flex-direction: column; /* This stacks everything! */
    align-items: center;
    max-width: 500px; /* Limits the width of the form so it's not too wide */
    margin: 20px auto 0 auto;
}

.input-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px; /* Space between each text box */
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
}

.form-input:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 5px rgba(51, 103, 30, 0.2);
}

.privacy-container {
    margin: 20px 0;
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- FORM BUTTON MATCHING --- */

.nav-button-style {
    /* Resetting default button weirdness */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    
    /* Applying your Brand Green and Font styles */
    background-color: var(--brand-green);
    color: var(--white);
    font-family: inherit; /* Ensures it doesn't switch to system font */
    font-weight: 600;
    font-size: 1rem;
    
    /* Matching the exact shape of your menu buttons */
    padding: 12px 30px;
    border-radius: 4px;
    text-transform: uppercase; /* Match this to your menu if they are uppercase */
    letter-spacing: 1px;
    
    /* Transitions for that smooth hover */
    transition: background-color 0.3s ease, transform 0.2s ease;
    
    /* Center it in the form */
    display: inline-block;
    width: 100%; /* Makes it match the width of your name/email inputs */
    margin-top: 10px;
}

.nav-button-style:hover {
    background-color: var(--brand-orange); /* Or whatever hover color your menu uses */
    transform: translateY(-2px); /* Gives it that "click me" lift */
}

.nav-button-style:active {
    transform: translateY(0);
	
/* --- DONATION BUTTON TWEAKS --- */

.donation-container {
    text-align: center;
    margin: 40px auto;
    max-width: 600px;
    padding: 20px;
}

/* We reuse the nav-button-style but add a 'donate-btn' class for minor tweaks */
.donate-btn {
    display: inline-block; /* Essential for links to behave like buttons */
    text-decoration: none; /* Removes the underline */
    width: auto;           /* Let the button shrink to fit the text */
    padding: 15px 40px;    /* Slightly larger for emphasis */
    background-color: var(--brand-orange); /* Using orange to grab attention */
}

.donate-btn:hover {
    background-color: var(--brand-green);
    transform: scale(1.05); /* Subtle grow effect */
}
}

/* --- CUSTOM DROPDOWN FOR CONTACT US FORM --- */

/* Custom Dropdown Styling */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232d4d1a' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Hidden Field Logic */
/* Hide by default, but allow JS to override it */
.hidden-field {
    display: none; 
    margin-top: 10px;
    border-left: 3px solid var(--brand-orange);
}

.show-field {
    display: block !important;
}

/* Message Area Height */
.message-area {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
}

/* --- ACCORDION STYLING --- */
.accordion-container {
    max-width: 800px;
    margin: 40px auto;
}

.accordion-item {
    border-bottom: 1px solid #cfee9e; /* Light brand green */
    margin-bottom: 10px;
}

.accordion-header {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: 20px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--brand-green);
    cursor: pointer;
    transition: background 0.3s ease;
}

.accordion-header:hover {
    background-color: rgba(45, 77, 26, 0.05); /* Very light green tint */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    padding: 0 20px;
    color: #444;
    line-height: 1.6;
}

.accordion-item.active .accordion-content {
   max-height: 2000px; /* Large enough to hold the text */
    padding: 0 20px 20px 20px;
}

.accordion-item.active .icon {
   transform: rotate(45deg); /* Turns the + into an x */
}

.icon {
    font-size: 1.5rem;
     transition: transform 0.3s ease;
     color: var(--brand-orange);
}


/* Mobile tweak */
@media (max-width: 600px) {
   .resource-box {
        padding: 20px 10px;
    }
}


/* --- CRISIS RESOURCE SECTION --- */
.resource-box {
    margin-top: 60px;
    padding: 30px;
    background-color: #f9fbf7; /* Very light herbal green */
    border-radius: 12px;
    border: 1px solid #e1ebd5;
    text-align: center;
}

.resource-box h3 {
    color: var(--brand-green);
    margin-bottom: 15px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.resource-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-top: 3px solid var(--brand-orange); /* The "Alert/Important" color */
    text-align: left;
}

.resource-card h4 {
    margin-top: 0;
    color: var(--brand-green);
    font-size: 1.1rem;
}

.resource-card p {
    margin: 8px 0;
    font-size: 0.95rem;
}

.resource-card a {
    color: var(--brand-orange);
    font-weight: bold;
    text-decoration: none;
}

.resource-disclaimer {
    margin-top: 25px;
    font-size: 0.8rem;
    color: #777;
}

/* Mobile tweak */
@media (max-width: 600px) {
    .resource-box {
        padding: 20px 10px;
    }
}

/* --- PRE-FOOTER HERO --- */

.footer-hero {
    height:53vh;
     background: var(--footer-img, url('msc_tree.jpg'));
     background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
   align-items: center;
	border-top: 5px solid #be4a20;
}

.footer-hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.footer-hero-content p {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* --- FOOTER & SPACING --- */

.content-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    /* Added 30px gap below the boxed content */
    margin-bottom: 80px; 
}

.site-footer {
    background-color: var(--brand-green);
    color: var(--white);
    padding: 40px 0 20px 0;
    text-align: center;
	border-top: 5px solid #be4a20;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-info h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.footer-links {
    margin: 20px 0;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.copyright {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* --- COMPREHENSIVE MOBILE RESPONSIVE FIX --- */

@media (max-width: 768px) {
    /* 1. Fix the Header Layout */
    .main-header {
        flex-direction: row; /* Keep logo and hamburger on one line */
        justify-content: space-between;
        min-height: 100px; /* Slimmer for mobile */
        padding: 10px 20px;
    }

    .logo-img {
        height: 50px; /* Scale logo down for phone screens */
    }

    /* 2. Style the Hamburger (Brand Orange) */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }

    .hamburger span {
        width: 100%;
        height: 3px;
        background-color: var(--brand-orange);
        border-radius: 2px;
        transition: 0.3s;
    }

    /* 3. The Mobile Menu (Hidden by default) */
    .nav-links {
        display: none; /* Hide standard menu */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Sits exactly under the header */
        left: 0;
        width: 100%;
        background-color: var(--brand-green);
        padding: 0;
        margin: 0;
        z-index: 1000;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* Show menu when JS adds 'active' class */
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    /* Adjust Buttons for Mobile stacking */
    .nav-links a {
        display: block;
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 15px 20px;
        font-size: 14px;
    }

    /* 4. Submenu Indentation */
    .dropdown-content {
        position: static; /* Forces it to expand the menu downward */
        display: block;   /* Keep sub-menus visible once main is open */
        background-color: #244915; /* Deeper Green to distinguish */
        box-shadow: none;
    }

    .dropdown-content a {
        padding-left: 45px !important; /* The Indent you wanted */
        font-size: 13px;
        background-color: #244915;
    }

    /* 5. Hero Image Fixes */
    .hero {
        height: 40vh; /* Shorter for mobile */
        background-attachment: scroll; /* Fixes "shaking" on mobile Chrome */
    }

    .footer-hero {
        height: 30vh;
        background-attachment: scroll;
    }

    .main-card {
        margin-top: -30px; /* Adjust the overlap */
        padding: 20px;
    }

    .scroll-heading {
        font-size: 1.8rem;
    }
}

/* --- Ensure Hamburger is hidden on Desktop --- */
@media (min-width: 769px) {
    .hamburger {
        display: none;
    }
}